import { Shape } from "@antv/x6";
import type { Options } from "@antv/x6/lib/graph/options";

export const BODY = {
	strokeWidth: 1,
	fill: "#FFFFFF",
	stroke: "#000000"
};

export const ATTRS = {
	circle: {
		r: 4,
		magnet: true,
		stroke: "#D06269",
		strokeWidth: 1,
		fill: "#fff",
		style: {
			visibility: "hidden"
		}
	}
};

export const PORTS = {
	groups: {
		top: {
			position: "top",
			attrs: { ...ATTRS }
		},
		right: {
			position: "right",
			attrs: { ...ATTRS }
		},
		bottom: {
			position: "bottom",
			attrs: { ...ATTRS }
		},
		left: {
			position: "left",
			attrs: { ...ATTRS }
		}
	},
	items: [
		{
			group: "top"
		},
		{
			group: "right"
		},
		{
			group: "bottom"
		},
		{
			group: "left"
		}
	]
};

export const GRAPH_CONFIG: Partial<Options.Manual> = {
	grid: {
		size: 8,
		visible: true
	},
	// 点选/框选
	selecting: {
		enabled: true,
		multiple: true,
		// 启用框选
		rubberband: true,
		movable: true,
		showNodeSelectionBox: true,
		showEdgeSelectionBox: true,
		modifiers: ["alt"]
	},
	// interacting: {
	//   vertexAddable: true,
	//   vertexMovable: true,
	// },
	connecting: {
		// router: 'manhattan',
		// connector: {
		//   name: 'rounded',
		//   args: {
		//     radius: 8,
		//   },
		// },
		// allowBlank: false,
		allowLoop: false,
		connectionPoint: "anchor",
		snap: { radius: 20 },
		createEdge() {
			return new Shape.Edge({
				attrs: {
					line: {
						stroke: "#1890ff"
						// strokeDasharray: 5,
						// style: {
						//   animation: "public-line 30s infinite linear",
						// },
					}
				},
				zIndex: 0
			});
		},
		validateConnection({ targetMagnet }) {
			return !!targetMagnet;
		}
	},
	highlighting: {
		magnetAdsorbed: {
			name: "stroke",
			args: {
				attrs: {
					fill: "#D06269",
					stroke: "#D06269"
				}
			}
		}
	},
	scroller: {
		enabled: true,
		pannable: true
	},
	resizing: true,
	rotating: true,
	snapline: true,
	history: true,
	keyboard: true,
	clipboard: true
};
